<template>
	<view class="container">
		<FeNavbar />
		<view class="page-title">修改密码</view>
		<view class="from-wrap">
			<view class="input-row-item">
				<view class="input-item-title">新密码</view>
				<view class="input-wrap">
					<image src="@/static/login/suo.png" mode="aspectFill"></image>
					<view class="input-box">
						<input type="password" placeholder="请输入新密码" :maxlength="pswMaxlength"
							v-model="submitData.password" placeholderClass="placeholderClass" />
					</view>
				</view>
			</view>
			<view class="input-row-item">
				<view class="input-item-title">再次输入新密码</view>
				<view class="input-wrap">
					<image src="@/static/login/suo.png" mode="aspectFill"></image>
					<view class="input-box">
						<input type="password" placeholder="请再次输入上面密码" :maxlength="pswMaxlength"
							v-model="submitData.confrim_password" placeholder-class="placeholderClass" />
					</view>
				</view>
			</view>
			<view class="input-row-item">
				<view class="input-item-title">
					<view class="left-tip-txt">
						向绑定邮箱{{userInfo.email}}发送验证码
						<!-- <template v-if="codeWay == 'phone'">
							向绑定手机号{{phoneDesen('18285859696')}}发送验证码
						</template>
						<template v-else>
							
						</template> -->
					</view>
					<!-- <view class="change-way" @click="changeGetCodeWay">
						<text>{{codeWay == "phone" ? "切换邮箱认证" :"切换手机号认证"}}</text>
						<image src="/static/mine/blu-right-arrow.png" mode="aspectFill"></image>
					</view> -->
				</view>
				<view class="input-wrap">
					<image src="@/static/login/yzm.png" mode="aspectFill"></image>
					<view class="input-box">
						<input type="number" placeholder="请输入验证码" :maxlength="yzmMaxlength" v-model="submitData.code"
							placeholder-class="placeholderClass" />
					</view>
					<view class="yzm-btn" :class="phoneCoding ? 'coding-bg' : ''" @click="handleGetPhoneCode">
						{{phoneCodeTips}}
						<u-code :seconds="phoneSeconds" changeText="X秒" @start="phoneCodeStart" @end="phoneCodeEnd"
							ref="refPhoneCode" @change="phoneCodeChange"></u-code>
					</view>
				</view>
			</view>
			<view style="font-size: 26rpx;color:#969696;margin-top: 20rpx;">
				密码格式：{{passwordGuide}}
			</view>

			<view class="login-btn" @click="handleConfirm">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		phoneDesen,
		validatePassword
	} from "@/util/helper.js"
	import {
		updatePassword,
		userVerifyCode
	} from "@/api/user.js"
	export default {
		data() {
			return {
				userInfo: getApp().globalData.userInfo,
				submitData: {
					password: "",
					confrim_password: "",
					code: "",
				},
				pswMaxlength: 16,
				yzmMaxlength: 6,
				phoneCodeTips: "",
				phoneSeconds: 60,
				phoneCoding: false,
				phoneDesen,
				codeWay: "phone", // 获取验证码方式
				passwordTip: getApp().globalData.passwordTip,
				passwordGuide: getApp().globalData.passwordGuide
			};
		},
		methods: {
			async handleConfirm() {
				if (this.isEmpty(this.submitData.password)) {
					uni.showToast({
						title: "请输入新密码",
						icon: "none"
					})
					return
				}
				if (this.submitData.password.length < 6) {
					uni.showToast({
						title: this.passwordTip,
						icon: "none"
					})
					return
				}
				if (!validatePassword(this.submitData.password)) {
					uni.showToast({
						title: getApp().globalData.passwordGuide,
						icon: "none",
						duration: 4000
					})
					return
				}

				if (this.isEmpty(this.submitData.confrim_password)) {
					uni.showToast({
						title: "请输入确认密码",
						icon: "none"
					})
					return
				}
				if (this.submitData.confrim_password.length < 6) {
					uni.showToast({
						title: this.passwordTip,
						icon: "none"
					})
					return
				}
				if (!validatePassword(this.submitData.confrim_password)) {
					uni.showToast({
						title: getApp().globalData.passwordGuide,
						icon: "none",
						duration: 4000
					})
					return
				}

				if (this.submitData.password !== this.submitData.confrim_password) {
					uni.showToast({
						title: "两次输入密码不一致",
						icon: "none"
					})
					return
				}
				if (this.isEmpty(this.submitData.code)) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}

				uni.showLoading({
					title: "提交中..."
				})
				await updatePassword({
					password: this.submitData.password,
					code: this.submitData.code
				})
				uni.showToast({
					title: "修改成功",
				})
				setTimeout(() => {
					this.toBack();
				}, 1500)
			},
			async handleGetPhoneCode() {
				if (this.$refs.refPhoneCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})

					await userVerifyCode({
						email: getApp().globalData.userInfo.email,
					});

					uni.showToast({
						title: "验证码已发您邮箱",
						icon: "none",
						duration: 3000
					})

					// 通知验证码组件内部开始倒计时
					this.$refs.refPhoneCode.start();
				}
			},

			phoneCodeChange(text) {
				this.phoneCodeTips = text;
			},
			phoneCodeStart() {
				this.phoneCoding = true;
			},
			phoneCodeEnd() {
				this.phoneCoding = false
			},
			// 切换获取验证码方式
			changeGetCodeWay() {
				if (this.codeWay == "phone") {
					this.codeWay = "email";
				} else {
					this.codeWay = "phone";
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.page-title {
			font-size: 50rpx;
			font-weight: 600;
			color: #26282B;
			line-height: 60rpx;
			padding: 32rpx 0 16rpx 32rpx;
		}

		.from-wrap {
			padding: 0 32rpx;

			.input-row-item {

				.input-item-title {
					font-size: 26rpx;
					color: #7B828A;
					margin: 32rpx 0 12rpx 0;
					display: flex;
					align-items: center;

					.left-tip-txt {
						flex: 1;
					}

					.change-way {
						text {
							flex: 1;
							font-size: 26rpx;
							color: #0D7DE4;
							line-height: 30rpx;
						}

						image {
							width: 12rpx;
							height: 20rpx;
							margin-left: 12rpx;
						}
					}
				}

				.input-wrap {
					height: 96rpx;
					background-color: #F4F5F7;
					border-radius: 12rpx;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0 28rpx;
					}

					.input-box {
						height: 100%;
						flex: 1;
						padding-right: 28rpx;
						color: #26282B;

						input {
							border: 0;
							width: 100%;
							height: 100%;
							font-size: 32rpx;
						}
					}

					.yzm-btn {
						width: 196rpx;
						height: 76rpx;
						line-height: 76rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #26282B;
						text-align: center;
						background-color: #FFE269;
						border-radius: 12rpx;
						margin-right: 10rpx;
					}

					.coding-bg {
						background-color: #D2D9E1;
					}

					.placeholderClass {
						color: #969696;
						font-size: 28rpx;
					}
				}
			}

			.login-btn {
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 12rpx;
				background: #FFE269;
				display: block;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #26282B;
				margin-top: 88rpx;
			}
		}
	}
</style>